<template>
	<view>
		<!-- 轮播 -->
		<swiper class="swiper"  autoplay=true interval=2000 circular=true indicator-dots=true>
			<swiper-item v-for="item in banner" :key="item.id" >
				<image :src="item.pic" style="width: 100%; "></image>
			</swiper-item>
			
		</swiper>
		<!-- 搜索框 -->
		<view class="search">
			<image src="../../static/icons/search.png" style="width: 25px; height: 25px;"></image>
		</view>
		<!-- 购物车 -->
		
<view class="cart">
	 <navigator url="/pages/home/cart/cart">
	                   <image src="../../static/icons/cart.png" style="width: 25px; height: 25px;"></image>
	 </navigator>
	
	
</view>
<!-- 分类展示区 -->
<view class="cation-box">
	<view class="cation" v-for="item in cation" :key="item.id">
		<navigator :url="`/pages/home/goodsInfo/goodsInfo?id=${item.id}`">
		<image :src="item.icon" style="width: 85px; height: 85px;"></image>
		<view>{{item.name}}</view>
		 </navigator>
	</view>
</view>
<!-- 滚动广告 -->
<!-- 基本用法 -->
<view v-for="item in recommendList" :key="item.productId" class="roll">
	<uni-notice-bar  class="roll-content" showIcon="true"  single="true" text="限时活动:"></uni-notice-bar>
	<view class="roll-text1">{{item.name}}</view>
	<view class="roll-text2">{{item.price}}</view>
	<view class="roll-text3">现价{{item.promotionPrice}}</view>
	
</view>
<!-- 热门推荐 -->
<view class="hot-content">热门推荐</view>
<swiper class="hot-swiper"  autoplay=true interval=2000  duration=2000 circular=true display-multiple-items=3>
			<swiper-item v-for="item in lejuLatestProducts" :key="item.brandId" >
				<image :src="item.pic" style="width:114px;height: 97px; "></image>
				<view class="hot-text">{{item.description}}</view>
			</swiper-item>
			
		</swiper>
<!-- 新品推荐 -->
<view class="hot-content">新品推荐</view>
<view class="new-pro">
	<view class="new-item" v-for="item in lejuLatestProducts" :key="item.id">
		<image :src="item.pic" style="width: 107px; height: 92px;"></image>
		<text class="new-text1">{{item.name}}</text>
		<text  class="new-text2">{{item.price}}</text>
	</view>
</view>
<!-- 猜你喜欢 -->

	<view class="like-text">猜你喜欢</view>
	<view class="like-box">
		<view class="like-item" v-for="item in saleMostProducts" :key="item.id">
			<image :src="item.pic" style="width: 180px; height: 130px;"></image>
			<view class="like-text2">{{item.brandName}}</view>
			<view class="like-text3">&#36{{item.price}}元</view>
			<text <view class="like-text4">乐居</view></text>
		</view>
	</view>
	





		<!-- 尾巴标签 -->
	</view>
</template>

<script>
	import nav from "../../components/uni-notice-bar/uni-notice-bar.vue"
	import {
		bannerAds,
		categorys,
		findProductList,
		recommendList,
		lejuLatestProducts,
		saleMostProducts
	} from "../../api/home/index.js"
	export default {
		data() {
			return {
				banner: [],
				cation:[],
				recommendList:[],
				lejuLatestProducts:[],
				saleMostProducts:[],
			};
		},
		methods:{
			
		},
		onLoad() {
			var _this = this;
			bannerAds()
				.then(res => {
					console.log(res)
					this.banner = res.data.data.items
				}),
				categorys("1308336521604599809")
				.then(res =>{
					console.log(res)
					_this.cation = res.data.data.category.children
				}),
				recommendList()
				.then(res =>{
					console.log(res)
					_this.recommendList = res.data.data.items
				}),
				lejuLatestProducts()
				.then(res =>{
					console.log(res)
					_this.lejuLatestProducts = res.data.data.productList
				}),
				saleMostProducts()
				.then(res =>{
					console.log(res)
					_this.saleMostProducts = res.data.data.items
				})
		}
	}
</script>

<style lang="scss" scoped>
	// 设置不生效
	body {
	   
	    background-color: #F1ECE7;
		}
	// 轮播
.swiper{
	position: relative;
}
//搜索栏以及购物车
.search{
	position: absolute;
	top: 0;
	right: 80px;
}
.cart{
	position: absolute;
	top: 0;
	right: 20px;
}
// 分类展示区
.cation-box{
	margin-top: 50px;
	display: flex;
	text-align: center;
	
	justify-content: space-evenly;
	align-items: center;
	.cation{
		image{
			border-radius: 16%;
		}
		
	}
}
// 广告
.roll{
	position: relative;
	.roll-content{
		span{
			font-size: 20px;
		}
		width: 100%;
		height: 105px;
		font-size: 20px;
		
		
	}
	.roll-text1{
		position: absolute;
		top: 43px;
		left: 100px;
		width: 120px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;	
	}
	.roll-text2{
		position: absolute;
		top: 35px;
		right: 60px;
		text-decoration:line-through;
	}
	.roll-text3{
		position: absolute;
		top: 55px;
		right: 60px;
		color: red;
		font-weight:bold;
	}
}
// 热门推荐的轮播
.hot-content{
	margin-bottom: 20px;
}
.hot-swiper{
	.hot-text{
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;	
	}
}
// 新品推荐
.new-pro{
	overflow-x: scroll;
	display: flex;
	// justify-content: space-evenly;
	// align-items: center;
	.new-item{
		width: 325px;
		height: 142px;
		border: 1px #000000 solid;
		.new-text1{
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;	
		}
	}
}
// 猜你喜欢
.like-box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.like-item{
		position: relative;
		margin-top: 20px;
		
		image{
			border-radius:16px;
		}
		.like-text2{
			color: #3e3e3e;
			    line-height: 20px;
			    margin-top: 4px;
			    font-weight: 700;
		}
		.like-text3{
			font-size: 14px;
		}
		.like-text4{
			position: absolute;
			right: 0px;
			bottom: 0px;
			color: #3e3e3e;
		}
	}
}
</style>
